<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: wiz
 * @Date: 2024-05-04 08:47:37
 * @LastEditors: swc shanwenchao12138@163.com
 * @LastEditTime: 2025-03-21 13:37:53
-->

<template>
  <span class="schedle-container">
    <Steps
      :current="getValue"
      :size="componentProps.config.content.size"
      :style="stepsStyle"
    >
      <Step
        v-for="(item, index) in componentProps.config.content.nodesData"
        :key="index"
        :title="componentProps.config.content.showInfo ? item.title : ''"
        :content="item.content"
        :icon="item.icon || ''"
      ></Step>
    </Steps>
  </span>
</template>

<script lang="ts">
import { T_srv, Tsrv, ifs, vue } from '@/services';
import { N_input } from '@/types';

@T_srv.comp
export default class cSchedule extends vue {
  // @T_srv.prop() renderOpts: N_input.I_renderOpts;

  // @T_srv.prop() params: any;
  @T_srv.prop({ required: true }) componentProps: N_input.I_componentProps;

  /* 组件名 */
  private name: string = 'cSchedule';

  private stepsStyle: any = {};

  private value: number = 0;

  private instance: any;

  private G_paramsFromComp: 'oBaseGrid' | 'oBaseForm' = null;

  get getValue() {
    if (
      Object.prototype.hasOwnProperty.call(
        this.componentProps.config.data,
        'value'
      )
    ) {
      return this.value;
    }
    return 0;
  }

  created() {
    this.handleCompData();
    this.init();
  }

  mounted() {}

  private init() {
    this.initStyle();
    this.getActiveValue();
  }

  private initStyle() {
    const { config } = this.componentProps;
    const { content } = config;
    const { nodeStyle } = content;
    this.stepsStyle = {
      '--finish-color': nodeStyle.finish.color,
      // '--finish-size': nodeStyle.finish.size,
      '--wait-color': nodeStyle.wait.color,
      // '--wait-size': nodeStyle.wait.size,
      '--process-color': nodeStyle.process.color
      // '--process-size': nodeStyle.process.size,
      // '--line-color': nodeStyle.line.color,
    };
  }

  private getActiveValue() {
    if (
      Object.prototype.hasOwnProperty.call(
        this.componentProps.config.data,
        'value'
      )
    ) {
      const oControl = this.componentProps?.oControl;
      if (Tsrv.noValue(oControl)) {
        return;
      }
      const params =
        this.G_paramsFromComp === 'oBaseGrid'
          ? this.instance.getSelectedData('current')
          : '';
      if (!Tsrv.utils.noValue(params)) {
        params.from = 'oControl';
        params.title =
          this.G_paramsFromComp === 'oBaseForm'
            ? oControl.params.property
            : oControl.params.column.property;
      }
      const currentRow =
        this.G_paramsFromComp === 'oBaseForm'
          ? oControl.params.data
          : oControl.params.row;
      this.JsonTransformObj([currentRow]);
      params.data.rows[this.instance.tableName] = [currentRow];
      params.data[this.instance.tableName] = [currentRow.id];
      Tsrv.doEvent(
        this.componentProps.config.data.value,
        // 'p_test_value',
        Tsrv.getFunInfo(
          this.G_paramsFromComp === 'oBaseGrid'
            ? oControl.renderOpts.props.getTcommand().funName
            : oControl.renderOpts.props.getTcommand().oBaseForm.funName
        ) as ifs.I_funInfo,
        () => params
      )
        .then(r => {
          if (!r.isErr()) {
            const res = r.getReturnData('conf');
            if (Tsrv.utils.noValue(res)) {
              return;
            }
            // 0 存储过程  1 系统策略 2 规则库 3 web请求
            if (res.apiType <= 2) {
              this.value = res.res.data?.request?.data?.value;
            } else if (res.apiType === 3) {
              //
            }
          }
        })
        .catch(err => {
          console.error(err);
        });
    }
  }

  private JsonTransformObj(rows: Array<any>) {
    if (rows && rows.length > 0) {
      rows.forEach(el => {
        const keys = Object.keys(el);
        for (let i = 0; i < keys.length; i++) {
          const ell = keys[i];
          if (ell === 'id' && el === '_file_info_id_' && el === '_sort_') {
            continue;
          }
          if (Tsrv.utils.isJSONString(el[ell])) {
            el[ell] = JSON.parse(el[ell]);
          }
        }
      });
    }
  }

  // 注册事件
  private regEvent() {
    this.instance.regControlEventCallBack('refresh', this.refreshEvetn);
  }

  private refreshEvetn() {
    this.getActiveValue();
  }

  // 获取夫组件实例
  private handleCompData() {
    if (!Tsrv.utils.noValue(this.componentProps?.oControl?.params)) {
      // 获取父组件类型
      if (
        Object.prototype.hasOwnProperty.call(
          this.componentProps.oControl.params,
          'property'
        )
      ) {
        this.G_paramsFromComp = 'oBaseForm';
      } else {
        this.G_paramsFromComp = 'oBaseGrid';
      }
      // 获取父组件实例
      if (
        typeof this.componentProps.oControl?.renderOpts?.props?.getTcommand ===
        'function'
      ) {
        this.instance = this.componentProps.oControl.renderOpts.props.getTcommand();
      }
    }
  }

  destroyed() {}
}
</script>

<style lang="scss" scoped>
.schedle-container {
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-content: center;
  align-content: center;
}
::v-deep .ivu-steps {
  .ivu-steps-item {
    .ivu-steps-head {
      background-color: transparent;
    }
    .ivu-steps-main {
      .ivu-steps-title {
        background-color: transparent;
      }
    }
  }
  // 完成
  .ivu-steps-status-finish {
    .ivu-steps-head {
      .ivu-steps-head-inner {
        > span {
          color: var(--finish-color);
        }
      }
    }
    .ivu-steps-main {
      .ivu-steps-title {
        color: var(--finish-color);
      }
      .ivu-steps-content {
        color: var(--finish-color);
      }
    }
    .ivu-steps-tail {
      > i ::after {
        background: var(--line-color);
      }
    }
  }
  // 等待
  .ivu-steps-status-wait {
    .ivu-steps-head {
      .ivu-steps-head-inner {
        > span {
          color: var(--wait-color);
        }
      }
    }
    .ivu-steps-main {
      .ivu-steps-title {
        color: var(--wait-color);
      }
      .ivu-steps-content {
        color: var(--wait-color);
      }
    }
  }
  // 进行
  .ivu-steps-status-process {
    .ivu-steps-head {
      .ivu-steps-head-inner {
        > span {
          color: var(--process-color);
        }
      }
    }
    .ivu-steps-main {
      .ivu-steps-title {
        color: var(--process-color);
      }
      .ivu-steps-content {
        color: var(--process-color);
      }
    }
  }
}
</style>
